<template>

  <div class="app-container">

    <el-form :inline="true" :model="queryForm" class="demo-form-inline" >
      <el-form-item style="margin-bottom:10px;">
        <el-input v-model="queryForm.keywords" prefix-icon="el-icon-search" placeholder="项目名称" style="width: 18.75rem;" @input="onQuerySubmit" />
      </el-form-item>
      <el-form-item style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus"  :loading="loading" @click="handleAdd" >新建应用</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      empty-text="暂无数据."
      style="width: 100%">
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column
            type="index"
            label="序号"
            width="50"
            align="center"
            :index="indexMethod">
          </el-table-column>

      <el-table-column
        prop="name"
        label="项目名称"
        >
      </el-table-column>

      <el-table-column
        prop="orgName"
        label="所属单位"
        >
      </el-table-column>

      <el-table-column
        prop="limit"
        label="路数"
        >
      </el-table-column>

      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="160px"
        align="center"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime | dateFormat}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="封面" width="220px" align="center">
         <template slot-scope="scope">
           <el-image
               style="width: 180px; height: 90px"
               fit="fit"
               :src="scope.row.url"
               >
           </el-image>
         </template>
       </el-table-column>

<!--      <el-table-column
        prop="version"
        label="当前版本"
        >
        <template slot-scope="scope">
          <div>当前版本: V1(最新版本: V1)</div>
          <div>更新时间:{{ scope.row.updateTime | dateFormat}}</div>
          <div>文件大小:{{ scope.row.size}}</div>
          <div style="font-weight: bold;">本地历史版本: </div>
          <div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in cities"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
              </el-option>
            </el-select>
          </div>

        </template>
      </el-table-column>

      <el-table-column
        prop="version"
        label="下载解压状态"
        width="180"
        >
        <template slot-scope="scope">
          <div style="text-align: center;">
            <div style="float: left;">
              <el-progress type="circle" :percentage="0" :width="100"></el-progress>
            </div>
            <div style="margin-left: 95px;padding-top: 32px;">
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="version"
        label="缺省分辨率"
        width="100"
        >
      </el-table-column>

      <el-table-column
        prop="version"
        label="帧率"
        width="100"
        >
      </el-table-column> -->


      <el-table-column label="操作" align="left" >
       <template slot-scope="scope">
         <el-button type="text"  size="small" @click="handleEdit(scope.row)">编辑
         </el-button>
         <el-button type="text" size="small" @click="handlePreview(scope.row)">预览
         </el-button>
         <el-button type="text" size="small" @click="handleShare(scope.row)">分享
         </el-button>
         <el-button type="text" size="small" @click="handleDelete(scope.row)">删除
         </el-button>
         <el-button type="text" size="small" @click="handleDebug(scope.row)">API调试
         </el-button>
       </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit" :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row>

    <scene-template-drawer
       v-if="templateDrawer.visible"
       :properties="templateDrawer"
       @closed="close"
       @refresh="load"
     />

  <!--编辑框-->
  <info-drawer
    v-if="editDrawer.visible"
    :properties="editDrawer"
    @closed="close"
    @refresh="load"
  />

    <!--分享-->
    <share-drawer
      v-if="shareDrawer.visible"
      :properties="shareDrawer"
      @closed="close"
      @refresh="load"
    />

    <!--预览-->
    <preview-drawer
      v-if="previewDrawer.visible"
      :properties="previewDrawer"
      @closed="close"
      @refresh="load"
    />

  </div>
</template>

<script>

  import SceneTemplateDrawer from './components/SceneTemplateDrawer.vue'
  import InfoDrawer from './components/InfoDrawer.vue'
  import PreviewDrawer from './components/PreviewDrawer.vue'
  import ShareDrawer from './components/ShareDrawer.vue'
  import DebugDrawer from './components/DebugDrawer.vue'

  import {
    hasPermission
  } from '@/utils/permission'
  import {
    findProjectList,
    deleteProject,
    getProjectTypes
  } from '@/api/biz/project'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name:'Project',
    components: {
      InfoDrawer,
      PreviewDrawer,
      ShareDrawer,
      SceneTemplateDrawer,
      DebugDrawer
    },
    data() {
      return {
        loading:false,
        baseUrl:process.env.VUE_APP_BASE_API,
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        tableData: [],
        editDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        previewDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        shareDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        debugDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        templateDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value: ''

      }
    },
    created() {
      this.load();
    },
    methods: {
      indexMethod(index) {
        return index +1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords=undefined;
        this.queryForm.status='';
        this.load()
      },
      load(){
        this.loading=true
        findProjectList({
          cur: this.page.cur,
          limit: this.page.limit,
          keywords: this.queryForm.keywords,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.page.total = _data.totalRow
            _data.list.forEach(item => {
              item['url']=this.baseUrl+'/biz/scene/thumbnail/'+item.sceneId
            })
            this.tableData = _data.list
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleAdd: function(e) {
        this.templateDrawer.visible = true
        this.templateDrawer.type = '0'
      },
      handleEdit: function(data) {
        this.editDrawer.visible = true
        this.editDrawer.type = '1'
        this.editDrawer.data = data
      },
      handlePreview: function(data) {
        this.previewDrawer.visible = true
        this.previewDrawer.type = '1'
        this.previewDrawer.data = data
      },
      handleShare: function(data) {
        this.shareDrawer.visible = true
        this.shareDrawer.type = '1'
        this.shareDrawer.data = data
      },
      handleDebug: function(data) {
        this.debugDrawer.visible = true
        this.debugDrawer.type = '1'
        this.debugDrawer.data = data
      },
      close: function(e) {
        this.templateDrawer.visible = false
        this.templateDrawer.data = {}

        this.editDrawer.visible = false
        this.editDrawer.data = {}
        this.previewDrawer.visible = false
        this.previewDrawer.data =  {}
        this.shareDrawer.visible = false
        this.shareDrawer.data =  {}

        this.debugDrawer.visible = false
        this.debugDrawer.data =  {}

        this.load()
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deleteProject({
            id: data.id
          }).then(response => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
    }
  }
</script>
